<<<<<<< HEAD
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Crop Box</title>
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" />
    <style>
        .container
        {
            position: absolute;
            top: 10%; left: 10%; right: 0; bottom: 0;
        }
        .action
        {
            width: 400px;
            height: 30px;
            margin: 10px 0;
        }
        .cropped>img
        {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<script src="/static/js/jquery-1.11.1.min.js"></script>
<script src="/static/js/cropbox.js"></script>
<h1 style="text-align:center">注册</h1>
<div id="reg_upload" class="container" style="left:550px;">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none">请选择图片...</div>
    </div>
    <div class="action">
        <input type="file" id="file" style="float:left; width: 250px">
        <input type="button" id="btnCrop" value="裁剪" style="float: right">
        <input type="button" id="btnZoomIn" value="+" style="float: right">
        <input type="button" id="btnZoomOut" value="-" style="float: right">
    </div>
</div>
<div id="reg_camera" class="container" style="left:550px;">
    <video id="video" width="960" height="540" autoplay muted></video>
    <div style='position: absolute;border:1px red solid;top:60px;left:330px;width:300px;height: 420px;'></div>
    <div>
        <button id="capture">拍照</button>
    </div>
    <canvas id="canvas" width="200" height="280" style="display: none"></canvas>
</div>
<div style="position:absolute;top:100px;left:300px;width:200px;height:280px;border:0px red solid;">
    <img id="preview" src="#" alt="未发现可用图片" width="100%" height="100%">
</div>
<div style="position:absolute;top:100px;left:100px;width:400px;height:400px;line-height: 40px">
    <form name="reg_form" style="line-height: 40px;" method="post" onsubmit="return before_submit();" action="/manager/register">
        <div>编号：</div>
        <input type="input" name="no" readonly value="{{no}}"/>
        <div>姓名：</div>
        <input name="name" autocomplete="off"/>
        <div>性别：</div>
        男<input name="sex" type="radio" value="男"/>
        女<input name="sex" type="radio" value="女"/>
        <input id="img" name="img" type="hidden"/>
        <div>
            <input id="sub" type="submit" value="注册">
        </div>
    </form>
    <div>注册方式：<span style="color:red">当前为<span id="reg_type">拍照注册</span></span></div>
    <input id="register" type="button" onclick="javascript:register()" value="切换为上传图片注册">
</div>
<script>
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    function success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }

    function error(error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      //调用用户媒体设备, 访问摄像头
      getUserMedia({video : {width: 960, height: 540}}, success, error);
    } else {
      alert('不支持访问用户媒体');
    }

    document.getElementById('capture').addEventListener('click', function () {
      // context.drawImage(video, 0, 0, 480, 260);
      context.drawImage(video,330,60,300,420,0,0,200,280)
      var strDataURI = canvas.toDataURL("image/jpeg");
      $('#preview').attr('src',strDataURI);
      $('#img').val(strDataURI);
      // 写到某个地方
    })
</script>
<script type="text/javascript">
    function before_submit(){
        if ($('#img').val()==''){
            alert('请上传图片或者拍照')
            return false;
        }
        if($("input[name='name']").val()==''){
            alert('输入姓名')
            return false;
        }
        if($("input[name='sex']").val()==''){
            alert('请选择性别')
            return false;
        }
        $('#sub').attr('disabled','disabled');
        return true;
    }
    function register(){
        if ($('#register').val()=='切换为拍照注册'){
            $('#reg_type').text('拍照注册');
            $('#register').val("切换为上传图片注册");
            $('#reg_camera').css('display','block');
            $('#reg_upload').css('display','none');
        }
        else{
            $('#register').val('切换为拍照注册');
            $('#reg_type').text('上传图片注册');
            $('#reg_camera').css('display','none');
            $('#reg_upload').css('display','block');
        }
    }
    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'avatar.png'
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
                $('.imageBox').css('background-size','contain')
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('#preview').attr('src',img);
            $('#img').val(img)
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
</script>
</body>
=======
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Crop Box</title>
    <link rel="stylesheet" href="/static/css/style.css" type="text/css" />
    <style>
        .container
        {
            position: absolute;
            top: 10%; left: 10%; right: 0; bottom: 0;
        }
        .action
        {
            width: 400px;
            height: 30px;
            margin: 10px 0;
        }
        .cropped>img
        {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<script src="/static/js/jquery-1.11.1.min.js"></script>
<script src="/static/js/cropbox.js"></script>
<h1 style="text-align:center">注册</h1>
<div id="reg_upload" class="container" style="left:550px;">
    <div class="imageBox">
        <div class="thumbBox"></div>
        <div class="spinner" style="display: none">请选择图片...</div>
    </div>
    <div class="action">
        <input type="file" id="file" style="float:left; width: 250px">
        <input type="button" id="btnCrop" value="裁剪" style="float: right">
        <input type="button" id="btnZoomIn" value="+" style="float: right">
        <input type="button" id="btnZoomOut" value="-" style="float: right">
    </div>
</div>
<div id="reg_camera" class="container" style="left:550px;">
    <video id="video" width="960" height="540" autoplay muted></video>
    <div style='position: absolute;border:1px red solid;top:60px;left:330px;width:300px;height: 420px;'></div>
    <div>
        <button id="capture">拍照</button>
    </div>
    <canvas id="canvas" width="200" height="280" style="display: none"></canvas>
</div>
<div style="position:absolute;top:100px;left:300px;width:200px;height:280px;border:0px red solid;">
    <img id="preview" src="#" alt="未发现可用图片" width="100%" height="100%">
</div>
<div style="position:absolute;top:100px;left:100px;width:400px;height:400px;line-height: 40px">
    <form name="reg_form" style="line-height: 40px;" method="post" onsubmit="return before_submit();" action="/manager/register">
        <div>编号：</div>
        <input type="input" name="no" readonly value="{{no}}"/>
        <div>姓名：</div>
        <input name="name" autocomplete="off"/>
        <div>性别：</div>
        男<input name="sex" type="radio" value="男"/>
        女<input name="sex" type="radio" value="女"/>
        <input id="img" name="img" type="hidden"/>
        <div>
            <input id="sub" type="submit" value="注册">
        </div>
    </form>
    <div>注册方式：<span style="color:red">当前为<span id="reg_type">拍照注册</span></span></div>
    <input id="register" type="button" onclick="javascript:register()" value="切换为上传图片注册">
</div>
<script>
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    function success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }

    function error(error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      //调用用户媒体设备, 访问摄像头
      getUserMedia({video : {width: 960, height: 540}}, success, error);
    } else {
      alert('不支持访问用户媒体');
    }

    document.getElementById('capture').addEventListener('click', function () {
      // context.drawImage(video, 0, 0, 480, 260);
      context.drawImage(video,330,60,300,420,0,0,200,280)
      var strDataURI = canvas.toDataURL("image/jpeg");
      $('#preview').attr('src',strDataURI);
      $('#img').val(strDataURI);
      // 写到某个地方
    })
</script>
<script type="text/javascript">
    function before_submit(){
        if ($('#img').val()==''){
            alert('请上传图片或者拍照')
            return false;
        }
        if($("input[name='name']").val()==''){
            alert('输入姓名')
            return false;
        }
        if($("input[name='sex']").val()==''){
            alert('请选择性别')
            return false;
        }
        $('#sub').attr('disabled','disabled');
        return true;
    }
    function register(){
        if ($('#register').val()=='切换为拍照注册'){
            $('#reg_type').text('拍照注册');
            $('#register').val("切换为上传图片注册");
            $('#reg_camera').css('display','block');
            $('#reg_upload').css('display','none');
        }
        else{
            $('#register').val('切换为拍照注册');
            $('#reg_type').text('上传图片注册');
            $('#reg_camera').css('display','none');
            $('#reg_upload').css('display','block');
        }
    }
    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'avatar.png'
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
                $('.imageBox').css('background-size','contain')
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
            $('#preview').attr('src',img);
            $('#img').val(img)
        })
        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });
</script>
</body>
>>>>>>> 726222435e2b1be4558061ccff383c87ac9d618d
</html>